<!doctype html>
<html class="h-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/assets/favicon.ico">
    <meta name="author" content="Bing">
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/DataTables/datatables.min.css" rel="stylesheet">
    <link href="/assets/my.css" rel="stylesheet">
    <title>{{ .title }}</title>
</head>
<body class="d-flex flex-column h-100">

<!-- 页头 -->
<header>
    <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 class="text-white">关于</h4>
                    <p class="text-muted">本工具由{{.shortCompanyName}}编写，供客户免费使用。<br/>{{.shortCompanyName}}
                        是国内一流的工业级交换机提供商。官网：<a
                                href="{{.companyWebsite}}" target="_blank">{{.companyWebsite}}</a></p>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-success" id="btn-start-all">全部启动</button>
                        <button type="button" class="btn btn-danger" id="btn-stop-all">全部停止</button>
                        <button type="button" class="btn btn-warning" id="btn-clear-all">清零所有</button>
                        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal-add-host">
                            添加主机
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container d-flex justify-content-between">
            <a href="#" class="navbar-brand d-flex align-items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
                     stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2"
                     viewBox="0 0 24 24" focusable="false">
                    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
                    <circle cx="12" cy="13" r="4"/>
                </svg>
                <strong>{{.title}}</strong>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
                    aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</header>

<!-- 表格 -->
<main role="main" class="flex-shrink-0">
    <div class="table-responsive p-5">
        <table id="tab-summary" class="table table-bordered table-sm table-hover" style="width: 100%"></table>
    </div>
</main>

<!-- 页脚 -->
<footer class="footer mt-auto">
    <hr/>
    <div class="container">
        <p class="float-right">
            <a href="#" class="btn btn-outline-secondary btn-sm">回到顶部</a>
        </p>
        <p>&copy;{{.companyName}}</p>
    </div>
</footer>

<!------------------------------ 弹出模态框 ------------------------------>
<!-- 添加主机 -->
<div class="modal fade" id="modal-add-host" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加主机</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="form-add-host" onsubmit="return false" action="">
                    <div class="form-group">
                        <label for="ipt-ping-timeout" class="col-form-label">PING超时(ms)</label>
                        <input type="number" class="form-control" id="ipt-ping-timeout" value="2000" min="1000"
                               max="3000" step="100">
                    </div>
                    <div class="form-group">
                        <label for="ipt-ping-interval" class="col-form-label">PING间隔(ms)</label>
                        <input type="number" class="form-control" id="ipt-ping-interval" value="5000" min="1000"
                               max="60000" step="500">
                    </div>
                    <div class="form-group">
                        <label for="ipt-ip-addresses" class="col-form-label">IP地址，支持批量添加，每行一个IP</label>
                        <textarea class="form-control" id="ipt-ip-addresses" rows="4" placeholder="x.x.x.x"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitAddHostForm('#form-add-host')">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑主机 -->
<div class="modal fade" id="modal-edit-host" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">编辑主机</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="form-edit-host" onsubmit="return false" action="">
                    <div class="form-group">
                        <label for="ipt-edit-ping-timeout" class="col-form-label">PING超时(ms)</label>
                        <input type="number" class="form-control" id="ipt-edit-ping-timeout" value="2000" min="1000"
                               max="3000" step="100">
                    </div>
                    <div class="form-group">
                        <label for="ipt-ping-interval" class="col-form-label">PING间隔(ms)</label>
                        <input type="number" class="form-control" id="ipt-edit-ping-interval" value="5000" min="1000"
                               max="60000" step="500">
                    </div>
                    <div class="form-group">
                        <label for="ipt-edit-payload" class="col-form-label">荷载字节（一般不需要修改）</label>
                        <input type="number" class="form-control" id="ipt-edit-payload-size" value="22" min="22"
                               max="1000">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitEditHostForm('#form-edit-host')">提交
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 历史数据 -->
<div class="modal fade" id="modal-records" tabindex="-1" role="dialog" aria-labelledby="recordsModal"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">历史记录</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body m-0 p-0">
                <div class="alert alert-danger" role="alert" id="echarts-alert"></div>
                <div id="echarts-main" style="height: 400px; width: auto"></div>
            </div>
            <div class="modal-footer">
                <label for="datetime-range-ipt" class="sr-only"></label>
                <input type="text" id="datetime-range-ipt" class="form-control" placeholder="时间范围">
            </div>
        </div>
    </div>
</div>

<!------------------------------ /end 弹出模态框 ------------------------------>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/assets/jquery.slim.min.js"></script>
<!-- <script src="/assets/popper.min.js"></script> -->
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/layer/layer.js"></script>
<script src="/assets/DataTables/datatables.min.js"></script>
<script src="/assets/laydate/laydate.js"></script>
<script src="/assets/moment.min.js"></script>
<script src="/assets/echarts.min.js"></script>
<script src="/assets/my.js" charset='utf-8'></script>
</body>
</html>